<template>
  <div class="main">
    <audio controls ref="music-1" style="display: none">
      <source src="./assets/1.mp3" type="audio/mpeg">
      Your browser does not support this audio format.
    </audio>
    <audio controls ref="music-2"  style="display: none">
      <source src="./assets/2.mp3" type="audio/mpeg">
      Your browser does not support this audio format.
    </audio>
    <div class="menus">
      <div style="
        position: absolute;
        right: 0rem;
        top:0rem;
        cursor: pointer;
        width: 3rem; height: 3rem;overflow: hidden; border-radius: 50%"
           @click="goto(`https://gitee.com/kimguoO`)"
      >
        <img src="./assets/222.png" style="width: 100%;height: 100%"/>
      </div>
      <div style="
        position: absolute;
        right: 0rem;
        top:3rem;
        cursor: pointer;
        width: 3rem; height: 3rem;overflow: hidden;border-radius: 50%"
           @click="goto(`http://kimguo.blog.csdn.net`)"
      >
        <img src="./assets/333.png" style="width: 100%;height: 100%"/>
      </div>
      <div style="
        position: absolute;
        right: 0rem;
        top: 6rem;
        cursor: pointer;
        width: 3rem; height: 3rem;overflow: hidden;border-radius: 50%"
           @click="gotoRouter('/program')"
      >
        <img src="./assets/444.png" style="width: 100%;height: 100%"/>
      </div>
      <div class="content">
        <div class="title">KIMGUO</div>
        <ul>
          <li>
            <a @click="gotoRouter('/Flowable-Main')">Flowable</a>
          </li>
          <li><a @click="gotoRouter('/Threes-Main')">Three.js</a></li>
          <li>
            <div>
              <a  @click="gotoRouter('/neo4j-main')">Neo4j</a>
              &nbsp;
              <a  @click="gotoRouter('/d3graph')">3d-graph</a>
            </div>
          </li>
          <li><a  @click="gotoRouter('/elasticsearch-main')">Elasticsearch</a></li>
          <li><a  @click="gotoRouter('/bimface-Main')" target="view_window">可视化</a></li>
        </ul>
      </div>
    </div>
    <router-view style="flex: 1;flex-grow: 1; overflow-y: auto"/>
    <div class="bottom">
      <a href="http://www.skeeplearning.top/">http://www.skeeplearning.top/</a>
      <br/>
      <a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备2021017763号</a>
    </div>
  </div>
</template>

<script>
export  default {
  methods: {
    goto(url) {
      window.open(url)
    },
    gotoRouter(path) {
      this.$router.push({path})
    }
  },
  mounted() {
    setTimeout(() => {
      let dom = this.$refs['music-1'];
      let dom2 = this.$refs['music-2'];
      dom.play();
      dom.addEventListener('ended', () => {
          dom2.play();
      })
      dom2.addEventListener('ended', () => {
          dom.play();
      })
    }, 25000)
  }
}
</script>

<style lang="less" scoped>

.main {
  .bottom {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  display: flex;
  flex-direction: column;
  height: 100%;
  .routerView {
    flex: 1;
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .menus {
    position: relative;
    & > .content {
      height: 8rem;
      line-height: 8rem;
      background: #333;
      color: white;
      margin: 0px auto;
      .title {
        font-size: 2.5rem;
      }
      @media (min-width: 768px) {
        width: 100vw;
        display: flex;
        .title {
          padding-left: 2rem;
        }
      }
      ul {
        list-style: none;
        display: flex;
        margin-block-start: 0;
        margin-block-end: 0;
        @media (min-width: 768px) {
          flex: 1;
        }
        li {
          display: inline;
          flex: 1;
          a {
            font-size: 2rem;
            cursor: pointer;
            text-decoration: none;
            color: white;
            &:hover {
              border-bottom: 2px solid #87CEFA;
            }
          }
        }
      }
    }
  }
}

</style>
